<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Porduct</title>
    <link rel="stylesheet" href="../styles/common.css">
    <link rel="stylesheet" href="../styles/page-home.css">
    <link rel="icon" href="favicon.ico">
</head>
<style>


.navArea ul.nav li{
       font-weight: bold;
    }
.x-daohang{
    font-weight: bold;
}
.daohang{
    margin-top: 20px;
    margin-left: 170px;
}
.xq{
    width: 1500px;
    height: 750px;
    /* border: 1px solid red; */
}
.xl{
    width:500px ;
    height: 800px;
     margin-top: 20px;
     margin-left: 170px;
     float: left;
}
.xt{
    width: 400px;
    height: 400px;
     border: 1px solid gainsboro;
}
.xxt{
    margin-top: 30px;
}
.hh{
    position: relative;
    left: -15px;
    top: 40px ;
}

#hhr{
    
left: -5px;
}
.hh2{
    width: 70px;
    height: 70px;
    border: 1px solid gainsboro;
    float: left;
    margin-left: 20px;
}
/*  */
.xr{
    float: left;
    width: 700px;
    height: 700px;
    margin-left: 40px;
    margin-top: 20px;
    /* border: 1px solid red; */
}
.xr-title{
    width:500px ;
    margin-top: 5px;
}
.xr-title span{
        font-weight: bold;
        font-size: 15px;
}
.xr-bg{
    width: 700px;
    height: 115px;
    margin-top: 20px;
    background-color:rgba(255,192,203,0.3);
}
.xr-much1{
    margin-left: 5px;
    padding-top: 20px;
}
.xr-much2{
    margin-left: 5px;
    padding-top: 40px;
}
.xr-hred{ 
    width: 50px;
    height: 20px;
    background-color:#C81523 ;
    margin-left: 10px;
}
.xr-hred span{
    color: white;
      padding-left: 5px;
}
.jia{
    float: left;
    width: 400px;
    margin-left: 5px;
}
.xr-xhx{
  position: relative;
  margin-top: 65px;
  font-weight: 700;
}
.anniu1{
    width: 50px;
    height: 26px;
    border: 1px solid darkgray;
    margin-left: 10px;
    float: left;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.anniu1 a{
    color: dimgrey;
 
}
.banben{
    float: none;
    clear: both;
    padding-top: 25px;
}
.anniu2{
    width: 50px;
    height: 26px;
    border: 1px solid darkgray;
    margin-left: 10px;
    float: left;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.anniu2 a{
    color: dimgrey;
 
}
.neicun{
    float: none;
    clear: both;
    padding-top: 5px;
}
.anniu3{
    width: 50px;
    height: 26px;
    border: 1px solid darkgray;
    margin-left: 10px;
    float: left;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.anniu3 a{
    color: dimgrey;
 
}
.fang{
    float: none;
    clear: both;
    padding-top: 5px;
}
.anniu4{
    width: 65px;
    height: 26px;
    border: 1px solid darkgray;
    margin-left: 10px;
    float: left;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.anniu4 a{
    color: dimgrey;
 
}
.tao{
    float: none;
    clear: both;
    padding-top: 5px;
}
.anniu5{
    width: 65px;
    height: 26px;
    border: 1px solid darkgray;
    margin-left: 10px;
    float: left;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.anniu5 a{
    color: dimgrey;
 
}
.shu{
    float: none;
    clear: both;
    padding-top: 5px;
}
.mai{
    width: 150px;
    height: 40px;
    background-color:#C81523 ;
    margin-left: 20px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */
}
.mai a span{
      color: white;
      padding-left: 5px;
      font-size: 17px;
      font-weight: bold;
}
.anniu-active{
    border-color: #C81523;

}
.pjs{
    width: 1400px;
    height: 2500px;
    /* border: 1px solid red; */
    margin-top: 20px;
    margin-bottom: 50px;
    margin-left: 160px;
    

}
.pjs-l{
    position: relative;
    margin-top: 48px;
    margin-left: -510px;
    width: 260px;
    height: 1400px;
    float: left;
    /* border: 1px solid blue; */
}
.pj-lx{
    position: relative;
    /* position:absolute; */
    z-index:100;
    border: 1px solid gainsboro;
    top: -49px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */
}
.pj-lx span{
    font-weight: bold;
    color: gray;
}

.shouji{
    display: none;
  width: 260px;
  height: 1200px;
  border: 1px solid gainsboro;
  margin-top: -50px;
  border-top: none;
}
.shouji2{
    display: none;
  width: 260px;
  height: 1200px;
  border: 1px solid gainsboro;
  margin-top: 0px;
  border-top: none;
}
.pj-rx{
    position: relative;
    /* position:absolute; */
     z-index:100;
    border: 1px solid gainsboro;
    /* margin-top: -97px; */
    /* margin-top: -1248px; */
    margin-left: 130px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.pj-rx span{
    font-weight: bold;
    color: gray;
}
.ppll{
    float: left;
}
.shouji div ul{
    padding-top: 20px;
}
.shouji div ul li{
    position: relative;
    height: 27px;
    margin-left: 5px;
    font-weight: bold;
    float: left;
    list-style: none;
    width: 120px;
}
.shouji2 div ul{
    padding-top: 20px;
}
.shouji2 div ul li{
    position: relative;
    height: 27px;
    margin-left: 5px;
    font-weight: bold;
    float: left;
    list-style: none;
    width: 120px;
}
.ipsl{
    margin-left: 20px;
}
.jj{
    width: 90px;
    height: 25px;
    border: 3px solid gainsboro;
    margin-left: 63px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

}
.jj span{
    color: gray;
    font-weight: bold;
}
.pjs-r{
    position: relative;
    margin-left: 270px;
    margin-top: -49px;
    float: left;
    width: 1200px;
    height: 1400px;
    /* border: 1px solid black; */

}
.rr1{
    position: absolute;
    /* position:absolute; */
     z-index:100;
    border: 1px solid gainsboro;
    /* margin-top: -97px; */
    /* margin-top: -1248px; */
    margin-top: -2px;
    margin-left: 0px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */


}
.rr1 span{
    font-weight: bold;
    color: gray;
}
.rr1-js{
    position: absolute;
    display:none;
    width: 260px;
  height: 1200px;
  /* border: 1px solid gainsboro; */
  margin-top: -50px;
  border-top: none;

}
.rr1-js div ul{
    padding-top: 60px;
    margin-top: 48px;
}
.rr1-js div ul li{
    position: relative;
    height: 27px;
    margin-left: 5px;
    font-weight: bold;
    list-style: none;
    width: 270px;
}


.rr2{
    position: absolute;
    /* position:absolute; */
     z-index:100;
    border: 1px solid gainsboro;
    /* margin-top: -97px; */
    /* margin-top: -1248px; */
    margin-top: -2px;
    margin-left: 262px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */
}
.rr2 span{
    font-weight: bold;
    color: gray;
}

.rr2-js{
    position: absolute;
    display:none;
    width: 260px;
     height: 200px;
  /* border: 1px solid gainsboro; */
  margin-top: -50px;
  border-top: none;


}
.rr2-js div ul{
    padding-top: 60px;
    margin-top: 48px;
}
.rr2-js div ul li{
    position: relative;
    height: 27px;
    margin-left: 5px;
    font-weight: bold;
    list-style: none;
    width: 270px;
}
.rr3{
    position: absolute;
    /* position:absolute; */
     z-index:100;
    border: 1px solid gainsboro;
    /* margin-top: -97px; */
    /* margin-top: -1248px; */
    margin-top: -2px;
    margin-left: 524px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */



}
.rr3 span{
    font-weight: bold;
    color: gray;
}
.rr3-js{
    position: absolute;
    display:none;
    width: 260px;
     height: 200px;
  /* border: 1px solid gainsboro; */
  margin-top: -50px;
  border-top: none;


}
.rr3-js div ul{
    padding-top: 60px;
    margin-top: 48px;
}
.rr3-js div ul li{
    position: relative;
    height: 27px;
    margin-left: 5px;
    font-weight: bold;
    list-style: none;
    width: 270px;
}
.rr4{
    position: absolute;
    /* position:absolute; */
     z-index:100;
    border: 1px solid gainsboro;
    /* margin-top: -97px; */
    /* margin-top: -1248px; */
    margin-top: -2px;
    margin-left: 784px;
    display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */


}
.rr4 span{
    font-weight: bold;
    color: gray;
}
.rr4-js{
    position: absolute;
    display:none;
    width: 260px;
     height: 200px;
  /* border: 1px solid gainsboro; */
  margin-top: -50px;
  border-top: none;


}
.rr4-js div ul{
    padding-top: 60px;
    margin-top: 48px;
}
.rr4-js div ul li{
    position: relative;
    height: 27px;
    margin-left: 5px;
    font-weight: bold;
    list-style: none;
    width: 270px;
}


.phone1{
    position: relative;
    z-index:100;
    margin-top: 530px;
}
.phone2{
    position: relative;
    z-index:100;
    margin-top: 80px;
}
.phone3{
    position: relative;
    z-index:100;
    margin-top: -140px;
    margin-bottom: 50px;
}





        .img1{
            width: 400px;
            height: 400px;
        }
        .img2{
            width: 1200px;
            height: 1200px;
           
            position: absolute;
        }
        #rightbox{
            border:1px solid #cccccc;
            position: absolute;
            z-index: 100;
            top: 240px;
            left: 650px;
            width: 600px;
            height: 600px;
            overflow: hidden;
            display: none;
        }
        .yellow{
            background-color:#F90;
			border:1px solid #cccccc;
            opacity: 0.5;
            width: 399px;
            height: 202px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            position: relative;
            /* margin-left: 300PX; */
        }
   





.sj-active{
    display: block;
}
.pj-active{
    border-top: 3px solid skyblue;
    border-bottom:none;
}
.xf:hover{
   cursor:pointer;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<body>
            <!-- 页面顶部 -->
            <div id="nav-bottom">
                <!-- 顶部 -->
                <div class="nav-top">
                        <div class="top">
                                <div class="py-container">
                                        <div class="shortcut">
                                                <ul class="fl">
                                                        <li class="f-item">商城欢迎您！</li>
                                                        <li class="f-item">
                                                                "请"<a href="#">登录</a><span><a href="#">免费注册</a></span>
                                                        </li>
                                                </ul>
                                                <ul class="fr">
                                                        <li class="f-item">
                                                                <a href="#">我的订单</a>
                                                        </li>
                                                        <li class="f-item space"></li>
                                                        <li class="f-item">
                                                                <a href="#">我的品优购</a>
                                                                <span class="arr"></span>
                                                        </li>
                                                        <li class="f-item space"></li>
                                                        <li class="f-item">品优购会员</li>
                                                        <li class="f-item space"></li>
                                                        <li class="f-item">企业采购</li>
                                                        <li class="f-item space"></li>
                                                        <li class="f-item">关注品优购</li>
                                                        <li class="f-item space"></li>
                                                        <li class="f-item">客户服务</li>
                                                        <li class="f-item space"></li>
                                                        <li class="f-item">网站导航</li>

                                                </ul>
                                        </div>
                                </div>

                        </div>
                        <!-- 头部 -->
                        <div class="header">
                                <div class="py-container">
                                        <div class="yui3-g Logo">
                                                <div class="yui3-u Left logoArea">
                                                        <a href="#" class="logo-bd"></a>
                                                </div>
                                                <!-- 搜索、热词 -->
                                                <div class="yui3-u Center searchArea">
                                                        <div class="search">
                                                                <form action class="sui-form form-inline">
                                                                        <div class="input-append">
                                                                                <input type="text" id="autocomplete"
                                                                                        class="input-error input-xxlarge" />
                                                                                <button type="button"
                                                                                        class="sui-btn btn-xlarge btn-danger">搜索</button>
                                                                        </div>
                                                                </form>
                                                        </div>
                                                        <div class="hotwords">
                                                                <ul>
                                                                        <li class="f-item">品优购首发</li>
                                                                        <li class="f-item">亿元优惠</li>
                                                                        <li class="f-item">9.9元团购</li>
                                                                        <li class="f-item">每99减30</li>
                                                                        <li class="f-item">亿元优惠</li>
                                                                        <li class="f-item">9元团购</li>
                                                                        <li class="f-item">办公用品</li>
                                                                </ul>
                                                        </div>
                                                </div>
                                                <!-- 购物车 -->
                                                <div class="yui3-u Right shopArea">
                                                        <div class="fr shopcar">
                                                                <div class="show-shopcar">
                                                                        <span class="car"></span>
                                                                        <a href="#"
                                                                                class="sui-btn btn-default btn-xlarge">
                                                                                <span>我的购物车</span>
                                                                                <i class="shopnum">0</i>
                                                                        </a>
                                                                        <div class="clearfix shopcarlist"></div>
                                                                </div>

                                                        </div>



                                                </div>
                                        </div>
                                        <!-- 导航条 -->
                                        <div class="yui3-g NavList">
                                                <div class="all-sorts-list" >
                                                        <div class="yui3-u  Left  all-sort" style="margin-top: 2px;">
                                                                <h4>全部商品分类</h4>
                                                        </div>
                                                       


                                                </div>
                                                <div class="yui3-u Center navArea">
                                                        <ul class="nav">
                                                                <li class="f-item">服装城</li>
                                                                <li class="f-item">美妆馆</li>
                                                                <li class="f-item">传智超市</li>
                                                                <li class="f-item">全球购</li>
                                                                <li class="f-item">闪购</li>
                                                                <li class="f-item">团购</li>
                                                                <li class="f-item">拍卖</li>
                                                                <li class="f-item">有趣</li>
                                                        </ul>




                                                </div>
                                                <div class="yui3-u Right"></div>
                                        </div>
                                </div>
                        </div>


                </div>




            </div>
            <!-- 导航栏 -->
            <div class="daohang">
                <a class="x-daohang" href="">手机、数码、通讯</a> <span style="color: gainsboro;">&nbsp;/&nbsp;</span>
                <a class="x-daohang" href="">手机</a>  <span style="color: gainsboro;">&nbsp;/&nbsp;</span>
                <a class="x-daohang" href="">Apple苹果</a>  <span style="color: gainsboro;">&nbsp;/&nbsp;</span>
                <a class="x-daohang" href="" style="color: darkgray;">iPhone 6s系列</a>
            </div>
            <!-- 详情 -->
            <div class="xq"  >
                <!-- z左边 -->
                <div class="xl" >
                    <div class="xt">
                       
                        <div class="box1">
                            <img id="yuan-tu" width="400px" height="400px" src="uploads/b1.png" class="img1" alt="">
                            <div class="yellow"></div>
                        </div>
                        <div id="rightbox">
                            <img id="yuan-tu2" width="400px" height="400px" src="uploads/b1.png" class="img2" alt="">
                        </div>
                

                

            
                    </div>
                    <div class="xxt">
                       <div class="hh xf" id="hhl" onclick="pre()"> <a   class="carousel-control left xf">‹</a></div>
                            <div ><img class="hh2 anniu-active" src="uploads/b1.png" alt=""></div>
                            <div ><img class="hh2" src="uploads/b2.png" alt=""></div>
                            <div ><img class="hh2" src="uploads/b3.png" alt=""></div>
                            <div ><img class="hh2" src="uploads/b1.png" alt=""></div>
                            <div ><img class="hh2" src="uploads/b2.png" alt=""></div>
                       <div class="hh xf" id="hhr" onclick="next()"> <a    class="carousel-control right xf">›</a></div>
                    </div>
                       
                </div>
                <!-- 右边 -->
                <div  class="xr">
                        <div class="xr-title">
                            <span>Apple&nbsp; iPhone&nbsp; 6s&nbsp; (A1700) &nbsp;64G玫瑰金色&nbsp;移动通信电信4G手机</span>
                        </div>
                        <div class="xr-bg">
                            <div class="xr-much1">
                                <span  style="float: left;">价&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                                <span  style="float: left; color: #C81523; margin-left: 10px; margin-top: 3px;">￥</span>
                                <span style="float: left; color: #C81523;font-size: 20px; font-weight: bold;">5299.00</span>
                                <span  style="float: left; color: #C81523;margin-top: 3px; margin-left: 5px; ">降价通知</span>
                                <span  style="float: left; margin-left: 400px; margin-top: 3px;">累计评价698300</span>
                            </div>
                            <div class="xr-much2">
                                <span  style="float: left;">促&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                                <div class="xr-hred"  style="float: left;">
                                    <span>加价购</span>
                                </div>
                                <div class="jia" >
                                   <span style="color: darkgray;">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</span> &nbsp;<a class="xf">详情》</a>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <span  style="float: left;   margin-left: 5px;">支&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                            <span style="color: darkgray;  margin-left: 10px;">以旧换新，闲置手机回收4G套餐超值抢礼品购</span> 
                        </div>
                        <div style="margin-top: 20px;">
                            <span  style="float: left;  margin-left: 5px;">配&nbsp;送&nbsp;至</span>
                            <span style=" float: left;color: darkgray;  margin-left: 10px; width: 400px;">北京海淀区中关v有货支持99元免运费|货到付款|211限时达由自营发货，并提供售后服务。11:00前完成下单，预计今天(08月10日）送达</span> 
                          
                        </div>
                        <hr class="xr-xhx" color="darkgray"/>
                        <!-- 手机颜色 -->
                        <div style="margin-top: 20px;">
                            <span  style="float: left;  margin-left: 5px;">选择颜色</span>
                            <div style="  margin-left: 10px; width: 400px; margin-top: -5px;">
                                <div class="anniu1 xf anniu-active"><a>金色</a></div>
                                <div class="anniu1 xf"><a>银色</a></div>
                                <div class="anniu1 xf"><a>黑色</a></div>
                                <div class="anniu1 xf"><a>玫瑰金</a></div>
                            </div> 
                          
                        </div>
                        <!-- 手机版本 -->
                        <div class="banben" style="margin-top: 40px;">
                            <span  style="float: left;  margin-left: 5px;">选择版本</span>
                            <div style=" float: left;   width: 400px; margin-top: -5px;">
                                <div class="anniu2 xf anniu-active"><a >公开版</a></div>
                                <div class="anniu2 xf"><a >移动4g</a></div>
                            </div> 
                          
                        </div>
                        <!-- 内存容量 -->
                        <div class="neicun" style="margin-top: 40px;">
                            <span  style="float: left;  margin-left: 5px;">内存容量</span>
                            <div style=" float: left;   width: 400px; margin-top: -5px;">
                                <div class="anniu3 xf anniu-active"><a >16G</a></div>
                                <div class="anniu3 xf"><a >64G</a></div>
                                <div class="anniu3 xf"><a>128G</a></div>
                            </div> 
                          
                        </div>
                        <!-- 购买方式 -->
                        <div class="fang" style="margin-top: 40px;">
                            <span  style="float: left;  margin-left: 5px;">购买方式</span>
                            <div style=" float: left;   width: 400px; margin-top: -5px;">
                                <div class="anniu4 xf anniu-active"><a >官方标配</a></div>
                                <div class="anniu4 xf"><a >移动优惠购</a></div>
                                <div class="anniu4 xf"><a >电信优惠购</a></div>
                            </div> 
                        </div>
                        <!-- 套装 -->
                        <div class="tao" style="margin-top: 40px;">
                            <span  style="float: left;  margin-left: 5px;">套&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 装</span>
                            <div style=" float: left;   width: 400px; margin-top: -5px;">
                                <div class="anniu5 xf anniu-active"><a>保护套装</a></div>
                                <div class="anniu5 xf"><a>充电套装</a></div>
                            </div> 
                        </div>
                        <!-- 数量 -->
                        <div class="shu" style="margin-top: 40px;">
                            <div>
                                <input type="text" style="float:left;width: 60px;height: 40px;text-align: center;" id="text_box" value="1">
                                <div style="float:left;">
                                    <input type="button" id="add" value="+">
                                    <br>
                                    <input type="button" id="min" value=" -">
                                </div>
                            </div>
                            <div class="mai" style="float:left;">
                                <a href="#"><span>加入购物车</span></a>
                            </div>
                            
                        </div>

                </div>
            </div>
            <!-- 商品介绍 -->
            <div class="pjs">
                <!-- 左 -->
                <div class="pjs-l">
                    <!-- 第一个 默认的 -->
                            <div class="ppll" >
                            <div style="width: 130px; height: 45px;" id="lxjj1" class="ppd pj-lx xf pj-active">
                                    <span>相关分类</span>
                            </div>
                            <div class="shouji sj-active">
                                <div style="width: 260px;height: 160px;" class="brandArea">
                            
                                    <ul>
                                        <li>手机</li>
                                        <li>手机壳</li>
                                        <li>内存卡</li>
                                        <li>IPhone配件</li>
                                        <li>贴膜</li>
                                        <li>手机耳机</li>
                                        <li>移动电源</li>
                                        <li>平板电脑</li>
                                    </ul>
                                </div>

                                <div style="width: 260px;height: 160px; margin-top: -300px;" class="brandArea">
                            
                                    <ul>
                                        <li style="width: 250px; height: 350px;border-bottom: 1px dashed #e4e4e4;">
                                            <img src="uploads/b3.png" alt="">
                                            <div class="ipsl">
                                                <span>Apple苹果iPhone 6s (A1699)</span>
                                            </div>
                                            <div class="ipsl">
                                                <span>￥6888</span>
                                            </div>
                                            <div class="jj xf">
                                               <span>加入购物车</span>
                                            </div>
                                        </li>
                                        <li style="width: 250px; height: 350px;border-bottom: 1px dashed #e4e4e4;">
                                            <img src="uploads/b3.png" alt="">
                                            <div class="ipsl">
                                                <span>Apple苹果iPhone 6s (A1699)</span>
                                            </div>
                                            <div class="ipsl">
                                                <span>￥6888</span>
                                            </div>
                                            <div class="jj xf">
                                               <span>加入购物车</span>
                                            </div>
                                        </li>
                                        <li style="width: 250px; height: 350px;border-bottom: 1px dashed #e4e4e4;">
                                            <img src="uploads/b3.png" alt="">
                                            <div class="ipsl">
                                                <span>Apple苹果iPhone 6s (A1699)</span>
                                            </div>
                                            <div class="ipsl">
                                                <span>￥6888</span>
                                            </div>
                                            <div class="jj xf">
                                               <span>加入购物车</span>
                                            </div>
                                        </li>
                                       
                                    </ul>
                                </div>


                            </div>
                           </div>







                     
                        <!-- 第二个 -->
                        <div class="ppll">
                        <div style="width: 130px; height: 45px;margin-top: -1248px ;" id="lxjj2" class="ppd pj-rx xf " >
                            <span>推荐品牌</span>
                        </div>
                        <div class="shouji2">
                            <div style="width: 260px;height: 160px;" class="brandArea">
                        
                                <ul>
                                    <li>手机2</li>
                                    <li>手机壳2</li>
                                    <li>内存卡2</li>
                                    <li>IPhone配件2</li>
                                    <li>贴膜2</li>
                                    <li>手机耳机2</li>
                                    <li>移动电源2</li>
                                    <li>平板电脑2</li>
                                </ul>
                            </div>

                            <div style="width: 260px;height: 160px; margin-top: -300px;" class="brandArea">
                        
                                <ul>
                                    <li style="width: 250px; height: 350px;border-bottom: 1px dashed #e4e4e4;">
                                        <img src="uploads/b3.png" alt="">
                                        <div class="ipsl">
                                            <span>Apple苹果iPhone 6s (A1699)</span>
                                        </div>
                                        <div class="ipsl">
                                            <span>￥6888</span>
                                        </div>
                                        <div class="jj xf">
                                           <span>加入购物车</span>
                                        </div>
                                    </li>
                                    <li style="width: 250px; height: 350px;border-bottom: 1px dashed #e4e4e4;">
                                        <img src="uploads/b3.png" alt="">
                                        <div class="ipsl">
                                            <span>Apple苹果iPhone 6s (A1699)</span>
                                        </div>
                                        <div class="ipsl">
                                            <span>￥6888</span>
                                        </div>
                                        <div class="jj xf">
                                           <span>加入购物车</span>
                                        </div>
                                    </li>
                                    <li style="width: 250px; height: 350px;border-bottom: 1px dashed #e4e4e4;">
                                        <img src="uploads/b3.png" alt="">
                                        <div class="ipsl">
                                            <span>Apple苹果iPhone 6s (A1699)</span>
                                        </div>
                                        <div class="ipsl">
                                            <span>￥6888</span>
                                        </div>
                                        <div class="jj xf">
                                           <span>加入购物车</span>
                                        </div>
                                    </li>
                                   
                                </ul>
                            </div>


                        </div>
                        </div>
                </div>
                <!-- 右 -->
                <div class="pjs-r">
                    <!-- 1 -->
                <div>
                    <div style="width: 260px; height: 45px"  class="rr rr1 xf pj-active  " >
                        <span>商品介绍</span>
                    </div>
                    <div class="rr1-js rj sj-active ">
                        <div style="width: 270px;height: 160px;" >
                            <ul>
                               <li>分辨率:1920*1080(FHD)</li>
                               <li>后置摄像头:1200万像素</li>
                               <li>前置摄像头:500万像素</li>
                               <li>核数:其他</li>
                               <li>频率:以官网信息为准</li>
                               <li>品牌: Apple</li>
                               <li>商品名称:APPLEiPhone 6s Plus</li>
                               <li>商品编号:1861098</li>
                               <li>商品毛重:0.51kg</li>
                               <li>商品产地:中国大陆</li>
                               <li>热点∶指纹识别，Apple Pay，金属机身，拍昭袖器</li>
                               <li>系统:苹果(IOs )</li>
                               <li>像素:1000-1600万机身</li>
                               <li>内存:64GB</li>
                            </ul>
                        </div>
                 </div>
                </div>

                    <!-- 2 -->
                 <div>
                 <div style="width: 260px; height: 45px"  class="rr rr2 xf " >
                    <span>规格与包装</span>
                 </div>
                 <div class="rr2-js rj">
                    <div style="width: 270px;height: 160px;" >
                        <ul>
                            <li>222分辨率:1920*1080(FHD)</li>
                               <li>后置摄像头:1200万像素</li>
                               <li>前置摄像头:500万像素</li>
                               <li>核数:其他</li>
                               <li>频率:以官网信息为准</li>
                               <li>品牌: Apple</li>
                               <li>商品名称:APPLEiPhone 6s Plus</li>
                               <li>商品编号:1861098</li>
                               <li>商品毛重:0.51kg</li>
                               <li>商品产地:中国大陆</li>
                               <li>热点∶指纹识别，Apple Pay，金属机身，拍昭袖器</li>
                               <li>系统:苹果(IOs )</li>
                               <li>像素:1000-1600万机身</li>
                               <li>内存:64GB</li>
                        </ul>
                    </div>

                 </div>
                </div>
                    <!-- 3 -->
                 <div>
                 <div style="width: 260px; height: 45px"  class="rr rr3 xf" >
                    <span>售后保障</span>
                 </div>
                 <div class="rr3-js rj">
                    <div style="width: 270px;height: 160px;" >
                        <ul>
                            <li>333分辨率:1920*1080(FHD)</li>
                            <li>后置摄像头:1200万像素</li>
                            <li>前置摄像头:500万像素</li>
                            <li>核数:其他</li>
                            <li>频率:以官网信息为准</li>
                            <li>品牌: Apple</li>
                            <li>商品名称:APPLEiPhone 6s Plus</li>
                            <li>商品编号:1861098</li>
                            <li>商品毛重:0.51kg</li>
                            <li>商品产地:中国大陆</li>
                            <li>热点∶指纹识别，Apple Pay，金属机身，拍昭袖器</li>
                            <li>系统:苹果(IOs )</li>
                            <li>像素:1000-1600万机身</li>
                            <li>内存:64GB</li>
                        </ul>
                    </div>

                 </div>
                </div>

                    <!-- 4 -->
                 <div>
                 <div style="width: 260px; height: 45px"  class="rr rr4 xf" >
                    <span>商品评价</span>
                 </div>
                 <div class="rr4-js rj">
                    <div style="width: 270px;height: 160px;" >
                        <ul>
                            <li>444分辨率:1920*1080(FHD)</li>
                               <li>后置摄像头:1200万像素</li>
                               <li>前置摄像头:500万像素</li>
                               <li>核数:其他</li>
                               <li>频率:以官网信息为准</li>
                               <li>品牌: Apple</li>
                               <li>商品名称:APPLEiPhone 6s Plus</li>
                               <li>商品编号:1861098</li>
                               <li>商品毛重:0.51kg</li>
                               <li>商品产地:中国大陆</li>
                               <li>热点∶指纹识别，Apple Pay，金属机身，拍昭袖器</li>
                               <li>系统:苹果(IOs )</li>
                               <li>像素:1000-1600万机身</li>
                               <li>内存:64GB</li>
                        </ul>
                    </div>

                 </div>
                </div>




                <div class="phone1" style="width: 1050px;height: 700px;">
                    <img src="images/phone1.png" width="1050px" height="700px" alt="">
                </div>

                <div class="phone2" style="width: 1050px;height: 700px;">
                    <img src="images/phone2.png" width="1050px" height="700px" alt="">
                </div>

                <div class="phone3" style="width: 1050px;height: 500px;">
                    <img src="images/phone3.png" width="1050px" height="500px" alt="">
                </div>


            </div>
         </div>

            <!-- 底部 -->
            <div class="clearfix footer">
                <div class="py-container">
                        <div class="footlink">
                                <div class="Mod-service">
                                        <ul class="Mod-Service-list">
                                                <li class="grid-service-item intro intro1">
                                                        <i class="serivce-item fl"></i>
                                                        <div class="service-text">
                                                                <h4>正品保障</h4>
                                                                <p>正品保障，提供发票</p>
                                                        </div>
                                                </li>
                                                <li class="grid-service-item intro intro2">
                                                        <i class="serivce-item fl"></i>
                                                        <div class="service-text">
                                                                <h4>极速物流</h4>
                                                                <p>极速物流，极速送达</p>
                                                        </div>
                                                </li>
                                                <li class="grid-service-item intro intro3">
                                                        <i class="serivce-item fl"></i>
                                                        <div class="service-text">
                                                                <h4>无忧售后</h4>
                                                                <p>7天无理由退换货</p>
                                                        </div>
                                                </li>
                                                <li class="grid-service-item intro intro4">
                                                        <i class="serivce-item fl"></i>
                                                        <div class="service-text">
                                                                <h4>特色服务</h4>
                                                                <p>私人订制家电套餐</p>
                                                        </div>
                                                </li>
                                                <li class="grid-service-item intro intro5">
                                                        <i class="serivce-item fl"></i>
                                                        <div class="service-text">
                                                                <h4>帮助中心</h4>
                                                                <p>您的购物指南</p>
                                                        </div>
                                                </li>
                                                
                                        </ul>
                                </div>
                                <div class="clearfix Mod=list">
                                        <div class="yui3-g">
                                                <div class="yui3-u-1-6">
                                                        <h4>购物指南</h4>
                                                        <ul class="unstyled">
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                        </ul>
                                                </div>
                                                <div class="yui3-u-1-6">
                                                        <h4>配送方式</h4>
                                                        <ul class="unstyled">
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                        </ul></div>
                                                <div class="yui3-u-1-6">
                                                        <h4>支付方式</h4>
                                                        <ul class="unstyled">
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                        </ul></div>
                                                <div class="yui3-u-1-6">
                                                        <h4>售后服务</h4>
                                                        <ul class="unstyled">
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                        </ul></div>
                                                <div class="yui3-u-1-6">
                                                        <h4>特色服务</h4>
                                                        <ul class="unstyled">
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                        </ul></div>
                                                <div class="yui3-u-1-6">
                                                        <h4>帮助中心</h4>
                                                        <ul class="unstyled">
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                                <li>购物流程</li>
                                                        </ul></div>
                                        </div>

                                </div>
                                <div class="Mod-copyright">
                                        <ul class="helpLink">
                                                <li>关于我们<span  class="space"></span></li>
                                                <li>联系我们<span  class="space"></span></li>
                                                <li>关于我们<span  class="space"></span></li>
                                                <li>商家入驻<span  class="space"></span></li>
                                                <li>营销中心<span  class="space"></span></li>
                                                <li>友情链接<span  class="space"></span></li>
                                                <li>关于我们<span  class="space"></span></li>
                                                <li>营销中心<span  class="space"></span></li>
                                                <li>友情链接<span  class="space"></span></li>
                                                <li>关于我们<span  class="space"></span></li>
                                        </ul>
                                        <p>地址:北京市昌平区建材城西路金燕龙办公楼一层邮编: 100096电话:400-618-4000传真:010-82935100</p>
                                        <p>京ICP备08001421号京公网安备110108007702</p>
                                </div>
                        </div>
                </div>
        </div>

            

<script>



 // 获取页面上我们需要的元素
 var box1=document.querySelector('.box1')
        var yellow=document.querySelector('.yellow')
        var box2=document.querySelector('#rightbox')
        var srceen=rightbox.children[0]
        // 鼠标进入和离开图片
        box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }
        // 鼠标在图片上移动触发事件
        box1.onmousemove=function(e){
            // 算出小盒子在图片的中心点
           var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
 
 
        //    判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
           if(x<0){
            //    此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
               x=0
           }else if(x>box1.offsetWidth-yellow.offsetWidth){
            //    小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时，说明超出，则始终等于图片盒子的宽度减去自身宽度
            x=box1.offsetWidth-yellow.offsetWidth
           }
 
        //    同上
           if(y<0){
               y=0
           }else if(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
 
        //    给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
           yellow.style.left=x+'px'
           yellow.style.top=y+'px'
 
 
        //    通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例
           srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
           srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
 
        // //    计算黄色小盒子在图片上的大小
           yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }










</script>

















            <script>
                $(function(){
                      $("#lxjj2").click(function(){
                            $(".pj-rx").css("margin-top","-97px");
                        });
                        $("#lxjj1").click(function(){
                            $(".pj-rx").css("margin-top","-1248px");
                        });

                        $(".ppd").click(function(){
                            $(".ppd").removeClass("pj-active");
                            $(this).addClass("pj-active");

                            $(".shouji").removeClass("sj-active");
                            $(".shouji2").removeClass("sj-active");
                            $(this).siblings().addClass("sj-active");
                            


                        });

                        $(".rr").click(function(){
                            $(".rr").removeClass("pj-active");
                            $(this).addClass("pj-active");

                            $(".rj").removeClass("sj-active");
                            $(this).siblings().addClass("sj-active");
                            


                        });
                       












                    var t = $("#text_box");
                    $("#add").click(function(){		
                        if(t.val()==null||t.val()==""){
                            t.val("0");
                        }
                        t.val(parseInt(t.val())+1)
                        setTotal();
                    })
                    $("#min").click(function(){
                        t.val(parseInt(t.val())-1)
                        if(t!=1){
                            t.val("1");
                        }
                        setTotal();
                    })
                    function setTotal(){
                        $("#total").html((parseInt(t.val())*3.95).toFixed(2));
                    }
                    setTotal();

                    $("#text_box").change(function(){
                        var t = $("#text_box").val();
                        isNumber(t);
                    });

                    $(".hh2").click(function(){
                           $(".hh2").removeClass("anniu-active");
                           var ss = this.src;
                        //    alert(ss);
                        console.log(ss);
                           $(this).addClass("anniu-active");
                           $("#yuan-tu").attr("src",ss);
                           $("#yuan-tu2").attr("src",ss);
                        
                    });




                    $(".anniu1").click(function(){
                        $(".anniu1").removeClass("anniu-active");
                        $(this).addClass("anniu-active");
                    });
                    $(".anniu2").click(function(){
                        $(".anniu2").removeClass("anniu-active");
                        $(this).addClass("anniu-active");
                    });
                    $(".anniu3").click(function(){
                        $(".anniu3").removeClass("anniu-active");
                        $(this).addClass("anniu-active");
                    });
                    $(".anniu4").click(function(){
                        $(".anniu4").removeClass("anniu-active");
                        $(this).addClass("anniu-active");
                    });
                    $(".anniu5").click(function(){
                        $(".anniu5").removeClass("anniu-active");
                        $(this).addClass("anniu-active");
                    });








                   
                });

                function isNumber(val) {
                    var t = $("#text_box");
                    if (val == "" || isNaN(val)||val<=0) {
                        // alert("不是有效数字，请填写数字！");
                        t.val("1");
                    } else {
                    }
                  }



             var picArr=new Array("uploads/b1.png","uploads/b2.png","uploads/b3.png","uploads/b1.png","uploads/b2.png",);
            var index=0;
            function next(){
                $(".hh2").removeClass("anniu-active");
                $(".hh2").eq(index+1).addClass("anniu-active");
                index++;
                if(index==picArr.length){
                   $(".hh2").eq(0).addClass("anniu-active");
                    index=0;
                }
                document.getElementById("yuan-tu2").src=picArr[index];
                document.getElementById("yuan-tu").src=picArr[index];
            }
            function pre(){
                $(".hh2").removeClass("anniu-active");
                $(".hh2").eq(index-1).addClass("anniu-active");
                index--;
                if(index<0){
                     $(".hh2").eq(picArr.length-1).addClass("anniu-active");
                    index=picArr.length-1;
                }
                document.getElementById("yuan-tu2").src=picArr[index];
                document.getElementById("yuan-tu").src=picArr[index];
            }

         </script>
             
</html>